<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue生命周期函数</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      // vue的生命周期函数:可以理解为在某个时刻自动执行的函数
      const app = Vue.createApp({
        data() {
          return {
            message: "Hello",
          };
        },
        methods: {
          btnClick() {
            alert("click");
          },
        },
        // 在实例生成之前会自动执行的函数
        beforeCreate() {
          console.log("beforecreate");
        },
        // 在实例生成之后会自动执行的函数
        created() {
          console.log("created");
        },

        template: `
                <div >{{message}}</div>
            `,
        // 在模板变成函数之后才执行这个函数,在组件内容被渲染到页面之前自动执行的函数
        beforeMount() {
          console.log(document.getElementById("root").innerHTML, "beforeMount");
        },
        // 模板和函数结合之后,生成我们想要的函数
        //
        mounted() {
          console.log(document.getElementById("root").innerHTML, ",mounted");
        },
        // 当data中的数据发生变化时,会自动执行的函数
        // 当数据发生变化时会立即自动执行的函数
        beforeUpdate() {
          console.log(
            document.getElementById("root").innerHTML,
            ",beforeUpdate"
          );
          //console.log('beforeupdate');
        },
        // 当data中的数据发生变化,同时页面完成更新之后,会自动执行的函数
        // 当数据发生变化,页面重新渲染后,会自动执行的函数
        updated() {
          console.log(document.getElementById("root").innerHTML, ",updated");
        },
         // 当vue应用失效时,自动执行的函数
        beforeUnmount() {
            console.log(document.getElementById("root").innerHTML, ",beforeUnmount");
        },
        // 当vue应用失效时,且dom完成销毁时,自动执行的函数
        unmounted() {
            console.log(document.getElementById("root").innerHTML, ",unmounted");
        },
      });
      const vm = app.mount("#root");
    </script>
  </body>
</html>
